<template>
	<div v-if="dataInfo">
		<view class="wrap-order-progress">
			<view class="title-color f-32 fBold"> 订单流程 </view>

			<view class="order-num-bg flex align-center">
				<view class="title-color f-28 limit-num-line"> 订单编号：{{ dataInfo.order_sn }} </view>

				<view class="copy f-20" @click="onCopyOrderNum"> 复制 </view>
			</view>

			<view class="wrap-progress-list">
				<block v-for="(item, index) in list" :key="index">
					<view class="progress-item flex">
						<view class="circle flex align-center just-center">
							<view v-if="item.status <= dataInfo.status"></view>
						</view>

						<view class="progress-right">
							<view class="one flex align-center">
								<view class="name title-color f-28"> {{ item.title }} </view>

								<view class="status f-26" v-if="item.status > dataInfo.status"> 状态未开启 </view>
							</view>

							<view class="time f-24" v-if="item.status <= dataInfo.status">
								{{ getAcceptTimeText(item.status) }}
							</view>

							<view
								class="phone-bg"
								v-if="(item.status === '5' || item.status === '7') && item.status <= dataInfo.status"
								@click="onPreview(item)"
							>
								<image v-if="item.status === '5'" :src="dataInfo.arrive_img" />
								<image v-else-if="item.status === '7'" :src="dataInfo.end_service_img" />
							</view>

							<view
								class="address-bg flex align-center"
								v-if="
									(item.status === '4' || item.status === '5' || item.status === '7') &&
									item.status <= dataInfo.status
								"
								@click="onCheckAddress(item.status)"
							>
								<image :src="getImageURL('order/location.png')" />

								<view class="f-24">{{ getAddressText(item.status) }}</view>
							</view>
						</view>

						<view class="line"></view>
					</view>
				</block>
			</view>
		</view>
	</div>
</template>

<script>
	export default {
		props: {
			/**
			 * 详情数据
			 */
			dataInfo: {
				type: Object,
				default: null,
			},
			/**
			 * 用户身份 1:普通用户 2:技师
			 */
			userStatus: {
				type: Number,
				default: 1,
			},
		},
		data() {
			return {
				list: [
					{ title: "服务师接单", status: "3" },
					{ title: "服务师出发", status: "4" },
					{ title: "服务师到达", status: "5" },
					{ title: "开始服务", status: "6" },
					{ title: "服务完成", status: "7" },
				],
			};
		},
		methods: {
			/**
			 * 复制订单号
			 */
			onCopyOrderNum() {
				uni.setClipboardData({
					data: this.dataInfo.order_sn,
					success: (success) => {
						this.$st.show("复制成功");
					},
				});
			},
			/**
			 * 预览图片
			 */
			onPreview(item) {
				let imageList = [this.dataInfo.end_service_img];
				if (item.status === "5") {
					imageList = [this.dataInfo.arrive_img];
				}
				this.$filters.onPreviewImage(imageList, 0);
			},
			/**
			 * 查看地址
			 */
			onCheckAddress(status) {
				let lat, lng, address;
				if (status === "4") {
					lat = this.dataInfo.trip_start_lat;
					lng = this.dataInfo.trip_start_lng;
					address = this.dataInfo.trip_start_address;
				} else if (status === "5") {
					lat = this.dataInfo.trip_end_lat;
					lng = this.dataInfo.trip_end_lng;
					address = this.dataInfo.trip_end_address;
				} else if (status === "7") {
					lat = this.dataInfo.service_complete_lat;
					lng = this.dataInfo.service_complete_lng;
					address = this.dataInfo.service_complete_address;
				}
				this.$filters.openMapNav({lat, lng, address})
			},
			/**
			 * 获取接单时间
			 * 订单状态:-1=已取消,1=待支付,2=待服务,3=技师接单,4=技师出发,5=技师到达,6=服务中,7=已完成,8=技师拒单
			 */
			getAcceptTimeText(status) {
				let time_text = "";

				const index = parseInt(status) - 1;
				const timeTextArray = [
					"",
					"",
					this.dataInfo.receiving_time_text,
					this.dataInfo.serout_time_text,
					this.dataInfo.arrive_time_text,
					this.dataInfo.start_service_time_text,
					this.dataInfo.end_service_time_text,
				];

				if (index >= 0 && index < timeTextArray.length) {
					time_text = timeTextArray[index];
				}

				return time_text;
			},
			/**
			 * 获取地址信息
			 */
			getAddressText(status) {
				let address_text = "";

				const index = parseInt(status) - 1;
				const addressTextArray = [
					"",
					"",
					"",
					this.dataInfo.trip_start_address,
					this.dataInfo.trip_end_address,
					"",
					this.dataInfo.service_complete_address,
				];

				if (index >= 0 && index < addressTextArray.length) {
					address_text = addressTextArray[index];
				}

				return address_text;
			},
		},
	};
</script>

<style lang="scss" scoped>
	.wrap-order-progress {
		margin-top: 20rpx;
		width: 100%;
		overflow: hidden;
		background-color: white;
		border-radius: 10rpx;
		padding: 30rpx 20rpx;
		box-sizing: border-box;

		.order-num-bg {
			margin-top: 30rpx;

			.copy {
				margin-left: 20rpx;
				width: 68rpx;
				height: 36rpx;
				line-height: 36rpx;
				text-align: center;
				color: $theme-color;
				border: 2rpx solid $theme-color;
				border-radius: 6rpx;
				overflow: hidden;
			}
		}

		.wrap-progress-list {
			margin-top: 15rpx;
			width: 100%;
			overflow: hidden;

			.progress-item {
				width: 100%;
				padding: 15rpx 0;
				position: relative;
				z-index: 1;

				.line {
					position: absolute;
					left: 16rpx;
					top: 0rpx;
					bottom: 0rpx;
					width: 2rpx;
					background-color: $old-price-color;
					z-index: 2;
				}
				&:first-child .line {
					top: 30rpx !important;
				}
				&:last-child .line {
					bottom: none;
					height: 15rpx;
				}

				&:last-child {
					margin-bottom: 0rpx;
					padding-bottom: 0rpx !important;
				}

				.circle {
					width: 30rpx;
					height: 30rpx;
					border-radius: 50%;
					overflow: hidden;
					border: 2rpx solid $theme-color;
					background-color: white;
					position: relative;
					z-index: 3;

					> view {
						width: 20rpx;
						height: 20rpx;
						border-radius: 50%;
						background-color: $theme-color;
						overflow: hidden;
					}
				}

				.progress-right {
					margin-left: 16rpx;
					flex: 1;
					overflow: hidden;

					.one {
						width: 100%;
						height: 34rpx;
						overflow: hidden;

						.name {
							width: 170rpx;
						}

						.status {
							color: $old-price-color;
						}
					}
					.time {
						margin-top: 20rpx;
						color: $old-price-color;
					}

					.phone-bg {
						margin-top: 20rpx;
						width: 196rpx;
						height: 196rpx;
						background-color: $old-price-color;
						border-radius: 10rpx;
						overflow: hidden;

						> image {
							width: 100%;
							height: 100%;
						}
					}

					.address-bg {
						margin-top: 20rpx;
						width: 100%;
						overflow: hidden;

						> image {
							width: 20rpx;
							height: 22rpx;
						}
						> view {
							margin-left: 8rpx;
							color: $theme-color;
							line-height: 1.4em;
						}
					}
				}
			}
		}

		.title-color {
			color: $title-color;
		}
	}
</style>
